<template>
  <div class="py-5">
    <div class="container">
      <div class="row mb-4">
        <div class="col-12">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><NuxtLink to="/">首页</NuxtLink></li>
              <li class="breadcrumb-item"><NuxtLink to="/destinations">目的地</NuxtLink></li>
              <li class="breadcrumb-item active" aria-current="page">{{ destination.name }}</li>
            </ol>
          </nav>
        </div>
      </div>
      
      <div class="row">
        <div class="col-lg-8">
          <div class="bg-light mb-4" style="height: 400px;"></div>
          
          <div class="mb-5">
            <div class="d-flex justify-content-between align-items-start mb-3">
              <div>
                <h1 class="fw-bold">{{ destination.name }}</h1>
                <p class="text-muted">
                  <i class="bi bi-geo-alt me-1"></i> {{ destination.location }}
                </p>
              </div>
              <div class="text-end">
                <div class="fs-4 fw-bold text-primary">￥{{ destination.price }}</div>
                <div>
                  <span class="badge bg-warning fs-6">
                    {{ destination.rating }} <i class="bi bi-star-fill"></i>
                  </span>
                </div>
              </div>
            </div>
            
            <div class="mb-4">
              <ul class="nav nav-tabs" id="destinationTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">
                    概览
                  </button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="itinerary-tab" data-bs-toggle="tab" data-bs-target="#itinerary" type="button" role="tab">
                    行程安排
                  </button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab">
                    游客评价
                  </button>
                </li>
              </ul>
              <div class="tab-content border border-top-0 p-4" id="destinationTabContent">
                <div class="tab-pane fade show active" id="overview" role="tabpanel">
                  <h5 class="fw-bold mb-3">目的地介绍</h5>
                  <p>{{ destination.description }}</p>
                  
                  <h5 class="fw-bold mb-3 mt-4">亮点特色</h5>
                  <div class="row">
                    <div v-for="(highlight, index) in destination.highlights" :key="index" class="col-md-6 mb-3">
                      <div class="d-flex">
                        <i class="bi bi-check-circle-fill text-success me-2 mt-1"></i>
                        <span>{{ highlight }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="tab-pane fade" id="itinerary" role="tabpanel">
                  <h5 class="fw-bold mb-3">详细行程</h5>
                  <div class="accordion" id="itineraryAccordion">
                    <div v-for="(day, index) in itinerary" :key="index" class="accordion-item">
                      <h2 class="accordion-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" 
                                :data-bs-target="'#day' + (index+1)" :aria-expanded="index === 0 ? 'true' : 'false'">
                          第{{ index+1 }}天：{{ day.title }}
                        </button>
                      </h2>
                      <div :id="'day' + (index+1)" class="accordion-collapse collapse" :class="{ 'show': index === 0 }" 
                           data-bs-parent="#itineraryAccordion">
                        <div class="accordion-body">
                          <p>{{ day.description }}</p>
                          <div v-if="day.activities.length > 0">
                            <h6 class="fw-bold">活动安排：</h6>
                            <ul>
                              <li v-for="(activity, i) in day.activities" :key="i">{{ activity }}</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="tab-pane fade" id="reviews" role="tabpanel">
                  <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="fw-bold">游客评价 ({{ reviews.length }} 条)</h5>
                    <button class="btn btn-primary">发表评价</button>
                  </div>
                  
                  <div v-for="(review, index) in reviews" :key="index" class="border-bottom pb-4 mb-4">
                    <div class="d-flex mb-2">
                      <div class="flex-grow-1">
                        <h6 class="mb-0">{{ review.name }}</h6>
                        <div class="text-warning">
                          <i v-for="n in 5" :key="n" 
                             :class="n <= review.rating ? 'bi bi-star-fill' : 'bi bi-star'"></i>
                          <span class="text-muted ms-2">{{ review.date }}</span>
                        </div>
                      </div>
                    </div>
                    <p>{{ review.comment }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="col-lg-4">
          <div class="card border-0 shadow sticky-top" style="top: 20px;">
            <div class="card-body">
              <h5 class="fw-bold mb-3">预订信息</h5>
              
              <div class="mb-3">
                <label class="form-label">出发日期</label>
                <input type="date" class="form-control">
              </div>
              
              <div class="mb-3">
                <label class="form-label">游客人数</label>
                <select class="form-select">
                  <option selected>1人 - ￥{{ destination.price }}</option>
                  <option>2人 - ￥{{ destination.price * 2 * 0.9 }}</option>
                  <option>3人 - ￥{{ destination.price * 3 * 0.85 }}</option>
                  <option>4人及以上 - ￥{{ destination.price * 4 * 0.8 }}</option>
                </select>
              </div>
              
              <div class="mb-3">
                <label class="form-label">特殊要求</label>
                <textarea class="form-control" rows="3" placeholder="如有特殊需求请在此说明..."></textarea>
              </div>
              
              <div class="d-grid gap-2">
                <button class="btn btn-primary btn-lg">
                  立即预订 - ￥{{ destination.price }}
                </button>
                <button class="btn btn-outline-secondary">
                  <i class="bi bi-heart me-2"></i>加入收藏
                </button>
              </div>
              
              <div class="mt-4">
                <h6 class="fw-bold mb-3">本产品包含</h6>
                <ul class="list-unstyled">
                  <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>往返机票</li>
                  <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>酒店住宿</li>
                  <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>景点门票</li>
                  <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>当地导游</li>
                  <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>旅游保险</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default'
})

const route = useRoute()
const id = route.params.id

// 模拟数据
const destination = {
  name: '巴黎浪漫之旅',
  location: '法国巴黎',
  rating: 4.8,
  price: 8999,
  description: '巴黎，这座光之城，以其浪漫氛围、艺术宝藏和标志性地标吸引着全世界的游客。从埃菲尔铁塔到卢浮宫，从塞纳河畔到蒙马特高地，每一个角落都散发着独特的魅力。',
  highlights: [
    '参观世界著名博物馆卢浮宫',
    '登顶埃菲尔铁塔俯瞰巴黎全景',
    '漫步香榭丽舍大街购物',
    '品尝正宗法式美食',
    '游览凡尔赛宫',
    '塞纳河游船观光'
  ]
}

const itinerary = [
  {
    title: '抵达巴黎',
    description: '专车接机，前往酒店办理入住手续，自由活动适应时差。',
    activities: ['酒店入住', '自由活动']
  },
  {
    title: '卢浮宫与塞纳河游船',
    description: '上午参观世界四大博物馆之首的卢浮宫，欣赏《蒙娜丽莎》等艺术珍品；下午乘坐塞纳河游船，欣赏两岸风光。',
    activities: ['卢浮宫参观（含门票）', '塞纳河游船（含船票）', '晚餐']
  },
  {
    title: '埃菲尔铁塔与香榭丽舍大街',
    description: '登顶埃菲尔铁塔，俯瞰巴黎全景；下午漫步香榭丽舍大街，自由购物。',
    activities: ['埃菲尔铁塔登塔（含门票）', '香榭丽舍大街自由活动', '凯旋门参观']
  },
  {
    title: '凡尔赛宫一日游',
    description: '前往凡尔赛宫，参观宫殿和花园，感受法国皇室的奢华生活。',
    activities: ['凡尔赛宫参观（含门票）', '宫殿花园游览', '午餐']
  },
  {
    title: '蒙马特高地与返程',
    description: '参观圣心大教堂，感受艺术家聚集地的独特氛围；随后前往机场，搭乘航班返回。',
    activities: ['圣心大教堂参观', '蒙马特高地游览', '送机服务']
  }
]

const reviews = [
  {
    name: '张明',
    rating: 5,
    date: '2024-05-15',
    comment: '这次巴黎之旅非常完美！导游讲解详细，行程安排合理，特别是卢浮宫和埃菲尔铁塔的体验令人难忘。'
  },
  {
    name: '李雅',
    rating: 4,
    date: '2024-04-22',
    comment: '整体体验不错，住宿和餐饮都很满意。唯一的小遗憾是凡尔赛宫当天人太多，不过也在意料之中。'
  },
  {
    name: '王磊',
    rating: 5,
    date: '2024-03-10',
    comment: '作为第一次去欧洲，这次旅行给我留下了深刻印象。旅行社的服务很专业，值得推荐！'
  }
]

useHead({
  title: `${destination.name} - TravelExplorer`
})
</script>